<template>
  <el-tabs v-model="activeName" type="card">

    <el-tab-pane label="待审核" name="first">
      <el-tabs tab-position="left">
        <el-tab-pane label="接收的任务">
          <div v-for="(waitingTask,index) in waitingTaskList" :key="index" style="clear: both;margin:0 auto">

            <div style="width: 20%;float: left;text-align:center">
              <el-avatar :size="50" :src="waitingTask.imgUrl"></el-avatar>
              <p>{{ waitingTask.isSuerName }}</p>
            </div>

            <div style="width: 60%;float: left">
              <p style="font-size: 20px;font-weight: 500;cursor:pointer">{{ waitingTask.mandateTitle }}</p>
              <span> <span style="color: red"> {{ waitingTask.salary }} </span>/天 </span>
              <span> <span style="color: red"> {{ waitingTask.workCycle }}</span> 日</span>
            </div>

            <div style="width: 20%;float: right">
              <el-button type="success" round v-if="waitingTask.receiveTaskStatus===1"
                         @click="gotoContract(waitingTask.id,waitingTask.isSuerId)">待签合同
              </el-button>
              <p v-else-if="waitingTask.taskStatus===0" style="text-align: center;">等待中...</p>
            </div>

            <div style="clear: both">
              <el-divider></el-divider>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="发布的任务">
          <el-tabs v-model="reviewName">

            <el-tab-pane label="待审核的任务" name="first">
              <div v-for="(waitingReview,index) in waitingReviewList" :key="index" style="clear: both;margin:0 auto">

                <div style="width: 20%;float: left;text-align:center">
                  <el-avatar :size="50" :src="waitingReview.imgUrl"></el-avatar>
                  <p>{{ waitingReview.isSuerName }}</p>
                </div>

                <div style="width: 60%;float: left">
                  <p style="font-size: 20px;font-weight: 500;cursor:pointer">{{ waitingReview.mandateTitle }}</p>
                  <span> <span style="color: red"> {{ waitingReview.salary }} </span>/天 </span>
                  <span> <span style="color: red"> {{ waitingReview.workCycle }}</span> 日</span>
                </div>

                <div style="width: 20%;float: right">
                  <p style="text-align: center;">等待中...</p>
                </div>

                <div style="clear: both">
                  <el-divider></el-divider>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="招募中的任务" name="second">
              <div v-for="(recruitingTask,index) in recruitingTaskList" :key="index"
                   style="clear: both;margin:0 auto">
                <div style="width: 20%;float: left;text-align:center">
                  <el-avatar :size="50" :src="recruitingTask.imgUrl"></el-avatar>
                  <p>{{ recruitingTask.isSuerName }}</p>
                </div>
                <div style="width: 50%;float: left">
                  <p style="font-size: 20px;font-weight: 500;cursor:pointer">{{ recruitingTask.mandateTitle }}</p>
                  <span> <span style="color: red"> {{ recruitingTask.salary }} </span>/天 </span>
                  <span> <span style="color: red"> {{ recruitingTask.workCycle }}</span> 日</span>
                </div>
                <div style="width: 30%;float: right">
                  <el-button type="primary" round @click="taskTurn(recruitingTask.id)">转一转</el-button>
                  <el-button type="danger" round @click="taskDel(recruitingTask.id,index)">删除</el-button>
                  <el-button style="margin-top: 5px" type="success" icon="el-icon-search" round
                             @click="viewApplicationList(recruitingTask.id)">查看申请列表
                  </el-button>
                </div>
                <div style="clear: both">
                  <el-divider></el-divider>
                </div>
              </div>
            </el-tab-pane>

          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>

    <el-tab-pane label="我的任务" name="second">
      <el-tabs tab-position="left">
        <el-tab-pane label="进行的任务">
          <div v-for="(processingTask,index) in processingTaskList" :key="index" style="clear: both;margin:0 auto">

            <div style="width: 20%;float: left;text-align:center">
              <el-avatar :size="50" :src="processingTask.imgUrl"></el-avatar>
              <p>{{ processingTask.isSuerName }}</p>
            </div>

            <div style="width: 60%;float: left">
              <p style="font-size: 20px;font-weight: 500;cursor:pointer" @click="goTaskProgress(processingTask.id)">
                {{ processingTask.mandateTitle }}
              </p>
              <span> <span style="color: red"> {{ processingTask.salary }} </span>/天 </span>
              <span> <span style="color: red"> {{ processingTask.workCycle }}</span> 日</span>
            </div>

            <div style="width: 20%;float: right">
              <p style="text-align: center;">任务进行中...</p>
            </div>

            <div style="clear: both">
              <el-divider></el-divider>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="完成的任务">
          <el-tabs v-model="taskName">

            <el-tab-pane label="成功任务" name="first">
              <div v-for="(completedTask,index) in completedTaskList" :key="index" style="clear: both;margin:0 auto">

                <div style="width: 20%;float: left;text-align:center">
                  <el-avatar :size="50" :src="completedTask.imgUrl"></el-avatar>
                  <p>{{ completedTask.isSuerName }}</p>
                </div>

                <div style="width: 60%;float: left">
                  <p style="font-size: 20px;font-weight: 500;cursor:pointer">{{ completedTask.mandateTitle }}</p>
                  <span> <span style="color: red"> {{ completedTask.salary }} </span>/天 </span>
                  <span> <span style="color: red"> {{ completedTask.workCycle }}</span> 日</span>
                </div>

                <div style="width: 20%;float: right">
                  <p style="text-align: center">任务成功</p>
                </div>

                <div style="clear: both">
                  <el-divider></el-divider>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="失败任务" name="second">
              <div v-for="(loseTask,index) in loseTaskList" :key="index" style="clear: both;margin:0 auto">

                <div style="width: 20%;float: left;text-align:center">
                  <el-avatar :size="50" :src="loseTask.imgUrl"></el-avatar>
                  <p>{{ loseTask.isSuerName }}</p>
                </div>

                <div style="width: 60%;float: left">
                  <p style="font-size: 20px;font-weight: 500;cursor:pointer">{{ loseTask.mandateTitle }}</p>
                  <span> <span style="color: red"> {{ loseTask.salary }} </span>/天 </span>
                  <span> <span style="color: red"> {{ loseTask.workCycle }}</span> 日</span>
                </div>

                <div style="width: 20%;float: right">
                  <p style="text-align: center;">任务失败</p>
                </div>

                <div style="clear: both">
                  <el-divider></el-divider>
                </div>
              </div>
            </el-tab-pane>

          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>

    <el-tab-pane label="我的雇佣" name="third">
      <el-tabs tab-position="left">
        <el-tab-pane label="进行的雇佣">
          <div v-for="(processingHire,index) in processingHireList" :key="index" style="clear: both;margin:0 auto">

            <div style="width: 20%;float: left;text-align:center">
              <el-avatar :size="50" :src="processingHire.receiveImageUrl"></el-avatar>
              <p>{{ processingHire.receiveName }}</p>
            </div>

            <div style="width: 60%;float: left">
              <p style="font-size: 20px;font-weight: 500;cursor:pointer" @click="goTaskProgress(processingHire.id)">
                {{ processingHire.mandateTitle }}</p>
              <span> <span style="color: red"> {{ processingHire.salary }} </span>/天 </span>
              <span> <span style="color: red"> {{ processingHire.workCycle }}</span> 日</span>
            </div>

            <div style="width: 20%;float: right">
              <p style="text-align: center;">任务进行中...</p>
            </div>

            <div style="clear: both">
              <el-divider></el-divider>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="完成的雇佣">
          <el-tabs v-model="hireName">

            <el-tab-pane label="待支付任务" name="first">
              <div v-for="(completedHire,index) in pendingPay" :key="index" style="clear: both;margin:0 auto">
                <div style="width: 20%;float: left;text-align:center">
                  <el-avatar :size="50" :src="completedHire.receiveImageUrl"></el-avatar>
                  <p>{{ completedHire.receiveName }}</p>
                </div>

                <div style="width: 60%;float: left">
                  <p style="font-size: 20px;font-weight: 500;cursor:pointer">{{ completedHire.mandateTitle }}</p>
                  <span> <span style="color: red"> {{ completedHire.salary }} </span>/天 </span>
                  <span> <span style="color: red"> {{ completedHire.workCycle }}</span> 日</span>
                </div>

                <div style="width: 20%;float: right">
                  <el-button type="success" round v-if="completedHire.paymentStatus===0"
                             @click="goPay(completedHire.orderId)">待支付
                  </el-button>

                </div>

                <div style="clear: both">
                  <el-divider></el-divider>
                </div>
              </div>
            </el-tab-pane>


            <el-tab-pane label="待评价任务" name="second">
              <div v-for="(completedHire,index) in pendingComment" :key="index" style="clear: both;margin:0 auto">
                <div style="width: 20%;float: left;text-align:center">
                  <el-avatar :size="50" :src="completedHire.receiveImageUrl"></el-avatar>
                  <p>{{ completedHire.receiveName }}</p>
                </div>

                <div style="width: 60%;float: left">
                  <p style="font-size: 20px;font-weight: 500;cursor:pointer">{{ completedHire.mandateTitle }}</p>
                  <span> <span style="color: red"> {{ completedHire.salary }} </span>/天 </span>
                  <span> <span style="color: red"> {{ completedHire.workCycle }}</span> 日</span>
                </div>

                <div style="width: 20%;float: right">

                  <el-button type="warning" round v-if="completedHire.paymentStatus===1"
                             @click="getPendingComOrder(completedHire.orderId)">待评价
                  </el-button>
                  <p v-else style="text-align: center">已支付</p>
                </div>

                <div style="clear: both">
                  <el-divider></el-divider>
                </div>
              </div>
            </el-tab-pane>


            <el-tab-pane label="成功任务" name="third">
              <div v-for="(completedHire,index) in completedHireList" :key="index" style="clear: both;margin:0 auto">
                <div style="width: 20%;float: left;text-align:center">
                  <el-avatar :size="50" :src="completedHire.receiveImageUrl"></el-avatar>
                  <p>{{ completedHire.receiveName }}</p>
                </div>

                <div style="width: 60%;float: left">
                  <p style="font-size: 20px;font-weight: 500;cursor:pointer">{{ completedHire.mandateTitle }}</p>
                  <span> <span style="color: red"> {{ completedHire.salary }} </span>/天 </span>
                  <span> <span style="color: red"> {{ completedHire.workCycle }}</span> 日</span>
                </div>

                <div style="width: 20%;float: right">
                  <p style="text-align: center;">任务完成</p>
                </div>

                <div style="clear: both">
                  <el-divider></el-divider>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="失败任务" name="fourth">
              <div v-for="(loseHire,index) in loseHireList" :key="index" style="clear: both;margin:0 auto">

                <div style="width: 20%;float: left;text-align:center">
                  <el-avatar :size="50" :src="loseHire.receiveImageUrl"></el-avatar>
                  <p>{{ loseHire.receiveName }}</p>
                </div>

                <div style="width: 60%;float: left">
                  <p style="font-size: 20px;font-weight: 500;cursor:pointer">{{ loseHire.mandateTitle }}</p>
                  <span> <span style="color: red"> {{ loseHire.salary }} </span>/天 </span>
                  <span> <span style="color: red"> {{ loseHire.workCycle }}</span> 日</span>
                </div>

                <div style="width: 20%;float: right">
                  <p style="text-align: center;">任务失败</p>
                </div>

                <div style="clear: both">
                  <el-divider></el-divider>
                </div>
              </div>
            </el-tab-pane>

          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>

  </el-tabs>

</template>

<script>
import Vue from 'vue'

export default {
  name: "pC_MyWork",
  data() {
    return {
      activeName: 'first',
      reviewName: 'first',
      taskName: 'first',
      hireName: 'first',

      waitingTaskList: [],
      waitingReviewList: [],
      recruitingTaskList: [],
      processingTaskList: [],
      pendingPay: [],
      pendingComment: [],
      completedTaskList: [],
      loseTaskList: [],

      processingHireList: [],
      completedHireList: [],
      loseHireList: [],

      taskTurnData: {
        taskId: ''
      },
    };
  },
  methods: {
    getPendingComOrder(orderId) {
      this.$router.push({
            path: '/userLoginMain/personCenter/publicComment',
            query: {id: orderId}
          }
      )
    },
    goTaskProgress(index) {
      this.$router.push({
        path: "/taskProgress",
        query: {taskId: index}
      })
    },

    //查看申请面试列表
    viewApplicationList(taskId) {
      this.$router.push({
        path: "/chooseTalent",
        query: {taskId: taskId}
      })
    },

    //待审核
    async initWaitingTaskList() {
      const {data: res} = await this.$http.get('/task/accepting')
      this.waitingTaskList = res.content.list
    },
    async initWaitingReviewList() {
      const {data: res} = await this.$http.get('/task/underReviewTask')
      this.waitingReviewList = res.content.list
    },
    async initRecruitingTaskList() {
      const {data: res} = await this.$http.get('/task/notAcceptedTask')
      this.recruitingTaskList = res.content.list
    },

    //我的任务
    async initProcessingTaskList() {
      const {data: res} = await this.$http.get('/order/myTakeOverProgressTask')
      this.processingTaskList = res.content.list
    },
    async initCompletedTaskList() {
      const {data: res} = await this.$http.get('/order/myTakeOverProgressTaskSuccess')
      this.completedTaskList = res.content.list
    },
    async initLoseTaskList() {
      const {data: res} = await this.$http.get('/order/myTakeOverProgressTaskFailure')
      this.loseTaskList = res.content.list
    },

    //我的雇佣
    async initProcessingHireList() {
      const {data: res} = await this.$http.get('/order/myReleaseProgressTask')
      this.processingHireList = res.content.list
    },
    async initCompletedHireList() {
      const {data: res} = await this.$http.get('/order/myReleaseProgressTaskSuccess')
      let arr = res.content.list
      for (let i in arr) {

        if (arr[i].paymentStatus === 0) {
          this.pendingPay.push(arr[i])
        } else if (arr[i].paymentStatus === 1) {
          this.pendingComment.push(arr[i])
        } else {
          this.completedHireList.push(arr[i])
        }
      }
    },
    async initLoseHireList() {
      const {data: res} = await this.$http.get('/order/myReleaseProgressTaskFailure')
      this.loseHireList = res.content.list
    },

    gotoContract(taskId, bossId) {
      this.$router.push({
        path: '/contract',
        query: {taskId: taskId, bossId: bossId}
      })
    },

    async taskTurn(taskId) {
      this.taskTurnData.taskId = taskId
      const {data: res} = await this.$http.put('/task/takeTurn/' + taskId)
      console.log(res)
    },

    async taskDel(taskId, index) {
      this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete('/task/task/' + taskId)
        Vue.prototype.$notify.success({
          title: "成功",
          message: '删除成功'
        });
        this.recruitingTaskList.splice(index, 1)
      }).catch(() => {
        Vue.prototype.$notify.error({
          title: "错误",
          message: "已取消删除"
        });
      })
    },

    async goPay(orderId) {
      const {data: res} = await this.$http.get('/pay/pay/' + orderId)

      document.querySelector('body').innerHTML = res;
      const div = document.createElement('div');
      div.innerHTML = res.data;
      document.body.appendChild(div);
      document.forms[0].setAttribute('target', '_blank');// 新建窗口页面
      document.forms[0].submit();

      this.$router.go(0)
    }

  },
  mounted() {
    this.initWaitingTaskList()
    this.initWaitingReviewList()
    this.initRecruitingTaskList()

    this.initProcessingTaskList()
    this.initCompletedTaskList()
    this.initLoseTaskList()

    this.initProcessingHireList()
    this.initCompletedHireList()
    this.initLoseHireList()
  }
}
</script>

<style scoped>

</style>